<!DOCTYPE html><html lang="[&quot;zh-Hans&quot;,&quot;zh-CN&quot;,&quot;default&quot;]"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="响应式开发"><meta name="keywords" content="css,响应式"><meta name="author" content="wenmu"><meta name="copyright" content="wenmu"><title>响应式开发 | 温木的博客</title><link rel="shortcut icon" href="/melody-favicon.ico"><link rel="stylesheet" href="/css/index.css?version=1.6.1"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css?version=1.6.1"><link rel="dns-prefetch" href="https://cdn.staticfile.org"><link rel="dns-prefetch" href="https://cdn.bootcss.com"><link rel="dns-prefetch" href="https://creativecommons.org"><link rel="dns-prefetch" href="http://ta.qq.com"><script>(function() {
   var hm = document.createElement("script");
   hm.src = "https://tajs.qq.com/stats?sId=&lt;script type=&quot;text/javascript&quot; src=&quot;http://tajs.qq.com/stats?sId=66523541&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt;";
   var s = document.getElementsByTagName("script")[0];
   s.parentNode.insertBefore(hm, s);
 })();</script><script>var GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  }
} </script><meta name="generator" content="Hexo 4.2.0"></head><body><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar"><div class="toggle-sidebar-info text-center"><span data-toggle="切换文章详情">切换站点概览</span><hr></div><div class="sidebar-toc"><div class="sidebar-toc__title">目录</div><div class="sidebar-toc__progress"><span class="progress-notice">你已经读了</span><span class="progress-num">0</span><span class="progress-percentage">%</span><div class="sidebar-toc__progress-bar"></div></div><div class="sidebar-toc__content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#ResponsiveWeb"><span class="toc-number">1.</span> <span class="toc-text">ResponsiveWeb</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#目录结构"><span class="toc-number">1.1.</span> <span class="toc-text">目录结构</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#一些有用的文件"><span class="toc-number">1.2.</span> <span class="toc-text">一些有用的文件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#404-页面"><span class="toc-number">1.2.1.</span> <span class="toc-text">404 页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#robots-txt"><span class="toc-number">1.2.2.</span> <span class="toc-text">robots.txt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#favicon-ico"><span class="toc-number">1.2.3.</span> <span class="toc-text">favicon.ico</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#humans-txt"><span class="toc-number">1.2.4.</span> <span class="toc-text">humans.txt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#editorconfig"><span class="toc-number">1.2.5.</span> <span class="toc-text">.editorconfig</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gitignore"><span class="toc-number">1.2.6.</span> <span class="toc-text">.gitignore</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html-头部元素的讲解"><span class="toc-number">1.3.</span> <span class="toc-text">html 头部元素的讲解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#cssreset-css-vs-Normalize-css"><span class="toc-number">1.4.</span> <span class="toc-text">cssreset.css vs Normalize.css</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#px、em、rem"><span class="toc-number">1.5.</span> <span class="toc-text">px、em、rem</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#高度塌陷"><span class="toc-number">1.5.1.</span> <span class="toc-text">高度塌陷</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html-中的空白字符"><span class="toc-number">1.5.2.</span> <span class="toc-text">html 中的空白字符</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#文字不换行"><span class="toc-number">1.6.</span> <span class="toc-text">文字不换行</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#滤镜"><span class="toc-number">1.7.</span> <span class="toc-text">滤镜</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#更改浏览器分辨率插件"><span class="toc-number">1.8.</span> <span class="toc-text">更改浏览器分辨率插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#使用媒体查询设置不同大小屏幕的样式"><span class="toc-number">1.9.</span> <span class="toc-text">使用媒体查询设置不同大小屏幕的样式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#媒体查询使用相对单位时的坑"><span class="toc-number">1.9.1.</span> <span class="toc-text">媒体查询使用相对单位时的坑</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#使用媒体查询设置打印样式"><span class="toc-number">1.10.</span> <span class="toc-text">使用媒体查询设置打印样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#根据不同分辨率加载不同大小的图片"><span class="toc-number">1.11.</span> <span class="toc-text">根据不同分辨率加载不同大小的图片</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#使用-js-或者服务端返回"><span class="toc-number">1.11.1.</span> <span class="toc-text">使用 js 或者服务端返回</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用新标记-srcset"><span class="toc-number">1.11.2.</span> <span class="toc-text">使用新标记 srcset</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用新标记-srcset-配合-sizes"><span class="toc-number">1.11.3.</span> <span class="toc-text">使用新标记 srcset 配合 sizes</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用新标记-picture"><span class="toc-number">1.11.4.</span> <span class="toc-text">使用新标记 picture</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用-svg-格式的图片"><span class="toc-number">1.11.5.</span> <span class="toc-text">使用 svg 格式的图片</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#兼容性对比"><span class="toc-number">1.11.6.</span> <span class="toc-text">兼容性对比</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#压缩图片网站"><span class="toc-number">1.11.7.</span> <span class="toc-text">压缩图片网站</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是-DPR"><span class="toc-number">1.12.</span> <span class="toc-text">什么是 DPR</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#搭建服务"><span class="toc-number">1.13.</span> <span class="toc-text">搭建服务</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#云测试网站"><span class="toc-number">1.14.</span> <span class="toc-text">云测试网站</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#使用-hacks-来解决兼容性"><span class="toc-number">1.15.</span> <span class="toc-text">使用 hacks 来解决兼容性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#部署"><span class="toc-number">1.16.</span> <span class="toc-text">部署</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#代码压缩"><span class="toc-number">1.16.1.</span> <span class="toc-text">代码压缩</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#响应式框架"><span class="toc-number">1.17.</span> <span class="toc-text">响应式框架</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#原型设计的工具"><span class="toc-number">1.18.</span> <span class="toc-text">原型设计的工具</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#交互工具"><span class="toc-number">1.19.</span> <span class="toc-text">交互工具</span></a></li></ol></li></ol></div></div><div class="author-info hide"><div class="author-info__avatar text-center"><img src="https://i.loli.net/2020/02/27/xwaBoOj158MfNyq.jpg"></div><div class="author-info__name text-center">wenmu</div><div class="author-info__description text-center">记录一些在工作中或学习新知识时学到的一些知识点；正所谓好记性不如一个烂笔头，温故而知新！</div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">文章</span><span class="pull-right">115</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">标签</span><span class="pull-right">52</span></a><a class="author-info-articles__categories article-meta" href="/categories"><span class="pull-left">分类</span><span class="pull-right">30</span></a></div></div></div><div id="content-outer"><div class="no-bg" id="top-container"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">温木的博客</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus"><a class="site-page" href="/">首页</a><a class="site-page" href="/archives">文章</a><a class="site-page" href="/tags">标签</a><a class="site-page" href="/categories">分类</a></span></div><div id="post-info"><div id="post-title">响应式开发</div><div id="post-meta"><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2020-02-25</time><span class="post-meta__separator">|</span><i class="fa fa-inbox post-meta__icon" aria-hidden="true"></i><a class="post-meta__categories" href="/categories/%E5%93%8D%E5%BA%94%E5%BC%8F/">响应式</a></div></div></div><div class="layout" id="content-inner"><article id="post"><div class="article-container" id="post-content"><h1 id="ResponsiveWeb"><a href="#ResponsiveWeb" class="headerlink" title="ResponsiveWeb"></a>ResponsiveWeb</h1><p>一个响应式网站</p>
<h2 id="目录结构"><a href="#目录结构" class="headerlink" title="目录结构"></a>目录结构</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── README.md</span><br><span class="line">├── doc                    # 项目文档</span><br><span class="line">└── src                    # 源代码</span><br><span class="line">    ├── css                # 样式文件</span><br><span class="line">    │   ├── main.css       # 公用样式</span><br><span class="line">    │   └── normalize.css  # reset的样式</span><br><span class="line">    ├── img                # 存放图片的文件夹</span><br><span class="line">    ├── js                 # 存放js的文件夹</span><br><span class="line">    │   ├── main.js        # main页面js</span><br><span class="line">    │   └── ventor         # 第三方库文件</span><br><span class="line">    ├── index.html         # 首页</span><br><span class="line">    └── login.html         # 登录页</span><br></pre></td></tr></table></figure>

<a id="more"></a>

<h2 id="一些有用的文件"><a href="#一些有用的文件" class="headerlink" title="一些有用的文件"></a>一些有用的文件</h2><h3 id="404-页面"><a href="#404-页面" class="headerlink" title="404 页面"></a>404 页面</h3><p>当放生 404 时，可以以更友好的方式展现，而不是使用系统给的错误页面。</p>
<h3 id="robots-txt"><a href="#robots-txt" class="headerlink" title="robots.txt"></a>robots.txt</h3><p>这个是搜索引擎在访问网站时第一个要查看的文件。<code>robots.txt</code> 告诉搜索引擎的爬虫程序，在服务器上什么文件可以被查看，什么文件不可用被查看。</p>
<p>比如下面就是指定除了<code>admin</code>文件夹都可以访问。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">User-agent: *</span><br><span class="line">Disallow: /admin/</span><br></pre></td></tr></table></figure>

<h3 id="favicon-ico"><a href="#favicon-ico" class="headerlink" title="favicon.ico"></a>favicon.ico</h3><p>这个是网站默认的图标，</p>
<h3 id="humans-txt"><a href="#humans-txt" class="headerlink" title="humans.txt"></a>humans.txt</h3><p>上面的 robots.txt 是给机器人看的，这个是给人类看的，包含了创建网站人员的信息等。<br><a href="http://humanstxt.org/ZH" target="_blank" rel="noopener">humanstxt 的介绍信息</a></p>
<h3 id="editorconfig"><a href="#editorconfig" class="headerlink" title=".editorconfig"></a>.editorconfig</h3><p>这个是配置 IDE 的参数，创建这个文件后，IDE 工具会使用这里面的配置，这样即使更换工具，配置还是一样的。<br><a href="https://editorconfig.org/" target="_blank" rel="noopener">官网地址</a></p>
<h3 id="gitignore"><a href="#gitignore" class="headerlink" title=".gitignore"></a>.gitignore</h3><p>配置一些 git 需要忽略的文件</p>
<h2 id="html-头部元素的讲解"><a href="#html-头部元素的讲解" class="headerlink" title="html 头部元素的讲解"></a>html 头部元素的讲解</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--lang规定了页面内容的语言，默认是en，这里指定简体中文，也可以使用zh，zh-CN是简体中文，zh支持更广泛的中文，比如繁体、方言等--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh-CN"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--设置网页编码，这个尽可能早的声明，比如放在了title下面，title的可能无法应用这个编码，导致乱码--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--设置视口，这里设置了可视视口和设备视口相等，并且默认不放大缩小--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span> /&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--设置兼容性，指定浏览器以哪种版本来渲染，比如下面就是ie以edge的方式来渲染--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--[if lte IE8]&gt;</span></span><br><span class="line"><span class="comment">&lt;p&gt;你的浏览器版本过低，请到 &lt;a href="https://browsehappy.com/"&gt;这里&lt;/a&gt; 进行升级&lt;/p&gt;</span></span><br><span class="line"><span class="comment">    &lt;[endif]--&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>这里只考虑 IE8 以上版本，上面 body 中的写法是 IE 浏览器中认识的注释提示，如果版本低于 IE8,就会看到提示内容。</p>
</blockquote>
<h2 id="cssreset-css-vs-Normalize-css"><a href="#cssreset-css-vs-Normalize-css" class="headerlink" title="cssreset.css vs Normalize.css"></a>cssreset.css vs Normalize.css</h2><p>这两个都是格式化 html 标签样式的库，第一个是把所有 html 的默认样式都去掉了，主要是去掉一些 margin、padding，并且统一了各个浏览器的显示样式。建议使用 Normalize.css</p>
<p><a href="https://meyerweb.com/eric/tools/css/reset/" target="_blank" rel="noopener">cssreset.css</a><br><a href="http://necolas.github.io/normalize.css/" target="_blank" rel="noopener">Normalize.css 地址</a></p>
<h2 id="px、em、rem"><a href="#px、em、rem" class="headerlink" title="px、em、rem"></a>px、em、rem</h2><p>[区别请看这]<br>响应式布局建议使用 rem 或者 em。</p>
<p>使用 rem 时需要注意一点，浏览器对每种字体的大小有个最小下限，比如汉字是 12px，英文是 10px，一次如果 rem 换算后低于这个下限，可能和预期会不一样。</p>
<h3 id="高度塌陷"><a href="#高度塌陷" class="headerlink" title="高度塌陷"></a>高度塌陷</h3><p>高度塌陷就是因为使用了 float 浮动布局，导致父元素的高度预和预想的不一致，因为在计算高度时，浮动的子元素是不包含在内的。</p>
<p>解决方法：</p>
<p>1.增加一个空的子元素，设置<code>clear:both</code>样式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    ....其他内容</span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"clear:both"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/&gt;</span></span><br></pre></td></tr></table></figure>

<p>但这种方式需要无意义的空标签，违背了结构和表现分离的精髓，所以这种方式现在已经不用了。</p>
<p>2.给父元素增加一个<code>overflow:auto</code>，或者也变成浮动。(就是把父元素变成<code>bfc</code>了)</p>
<p>3.使用 after 伪元素，在父元素上增加下面的样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  content: " "; //使用一个空格或者.</span><br><span class="line">  <span class="selector-tag">display</span>: <span class="selector-tag">table</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">clear</span>: both;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.clearfix</span> &#123;</span><br><span class="line">  <span class="attribute">zoom</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>4.使用 bfc</p>
<p>把容器变成 bfc 就可以了。</p>
<h3 id="html-中的空白字符"><a href="#html-中的空白字符" class="headerlink" title="html 中的空白字符"></a>html 中的空白字符</h3><p>在对<code>li</code>设置成<code>inline-block</code>时，各个元素之间会有 3 像素的空隙，这个就是 html 中的空白字符，就是在编写 html 文件时，各个元素之间的换行符引起的。</p>
<p>解决方案：</p>
<ol>
<li>把所有的<code>li</code>元素都写在一行，这可读性太差</li>
<li>把父元素的字体大小设置成 0，因为空白字符也属于字符</li>
<li>把元素的关闭标签和下一个的开始标签写到一块</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">    &lt;li&gt;aaaa</span><br><span class="line">    &lt;&#x2F;li&gt;&lt;li&gt;bbb</span><br><span class="line">    &lt;&#x2F;li&gt;&lt;li&gt;ccc&lt;&#x2F;li&gt;</span><br><span class="line">&lt;&#x2F;ul&gt;</span><br></pre></td></tr></table></figure>

<p>但是很多格式化工具都给格式化回去了。</p>
<ol start="4">
<li>不闭合</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li&gt;&lt;a&gt;aaa&lt;&#x2F;a&gt;</span><br><span class="line">  &lt;li&gt;&lt;a&gt;bbb&lt;&#x2F;a&gt;</span><br><span class="line">&lt;&#x2F;ul&gt;</span><br></pre></td></tr></table></figure>

<ol start="5">
<li>设置间隙为负值</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">li</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: -<span class="number">3px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>设置 inline-block 的容器，font-size 设置成 0，不然有间隙。</p>
</blockquote>
<h2 id="文字不换行"><a href="#文字不换行" class="headerlink" title="文字不换行"></a>文字不换行</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.notice</span> &#123;</span><br><span class="line">  <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="滤镜"><a href="#滤镜" class="headerlink" title="滤镜"></a>滤镜</h2><p>下面是让图片显示成灰色</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">filter</span>: <span class="selector-tag">grayscale</span>(100%);</span><br></pre></td></tr></table></figure>

<h2 id="更改浏览器分辨率插件"><a href="#更改浏览器分辨率插件" class="headerlink" title="更改浏览器分辨率插件"></a>更改浏览器分辨率插件</h2><p><code>Viewport Resizer</code></p>
<h2 id="使用媒体查询设置不同大小屏幕的样式"><a href="#使用媒体查询设置不同大小屏幕的样式" class="headerlink" title="使用媒体查询设置不同大小屏幕的样式"></a>使用媒体查询设置不同大小屏幕的样式</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">min-width:</span> <span class="number">800px</span>) &#123;</span><br><span class="line">  <span class="selector-class">.header</span> <span class="selector-class">.top</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: red;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">min-width:</span> <span class="number">400px</span>) <span class="keyword">and</span> (<span class="attribute">max-width:</span> <span class="number">800px</span>) &#123;</span><br><span class="line">  <span class="selector-class">.header</span> <span class="selector-class">.top</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: red;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="媒体查询使用相对单位时的坑"><a href="#媒体查询使用相对单位时的坑" class="headerlink" title="媒体查询使用相对单位时的坑"></a>媒体查询使用相对单位时的坑</h3><p>上面已经把 html 的字体大小设置成了 1rem=10px 的关系</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">min-width:</span> <span class="number">80rem</span>) &#123;</span><br><span class="line">  <span class="selector-class">.header</span> <span class="selector-class">.top</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: red;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>通过上面的设置会发现，80rem 转换后并不是 800px，而是一千多，这是为什么呢？<br>这是因为媒体查询的级别很高，它不是 html 下面的一个子元素，所以设置 html 的字体大小对它没影响，他使用的是浏览器的字体大小。chrome 默认是 16px；</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">min-width:</span> <span class="number">50em</span>) &#123;</span><br><span class="line">  <span class="selector-class">.header</span> <span class="selector-class">.top</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: red;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>细心的同学发现了，上面单位改成了 em，而不是 rem，因为这个不需要针对 html，所以使用 em 也一样，并且 rem 的兼容性没有 em 好。</p>
<h2 id="使用媒体查询设置打印样式"><a href="#使用媒体查询设置打印样式" class="headerlink" title="使用媒体查询设置打印样式"></a>使用媒体查询设置打印样式</h2><p>可以通过媒体查询设置打印显示的样式。</p>
<h2 id="根据不同分辨率加载不同大小的图片"><a href="#根据不同分辨率加载不同大小的图片" class="headerlink" title="根据不同分辨率加载不同大小的图片"></a>根据不同分辨率加载不同大小的图片</h2><p>因为移动端屏幕小，不需要 pc 那样大的图片，并且大图片会导致加载慢，还费流量；所以需要根据不同的分辨率，加载不同尺寸的图片。如何解决呢？</p>
<h3 id="使用-js-或者服务端返回"><a href="#使用-js-或者服务端返回" class="headerlink" title="使用 js 或者服务端返回"></a>使用 js 或者服务端返回</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> windowWidth = $(<span class="built_in">window</span>).width();</span><br><span class="line"><span class="keyword">if</span>(windowWidth&lt;=<span class="number">480</span>px)&#123;</span><br><span class="line">    $(<span class="string">'imgId'</span>).attr(<span class="string">'src'</span>,<span class="string">'480.png'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或者把尺寸信息放到 cookie 中传给服务端，服务端返回对应图片的地址。</p>
<h3 id="使用新标记-srcset"><a href="#使用新标记-srcset" class="headerlink" title="使用新标记 srcset"></a>使用新标记 srcset</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">img &#123; display: block; width: 100%; &#125;</span><br><span class="line"><span class="tag">&lt;<span class="name">img</span></span></span><br><span class="line"><span class="tag">  <span class="attr">alt</span>=<span class="string">"测试不同分辨率显示图片"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">src</span>=<span class="string">"/img/ad001.png"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">srcset</span>=<span class="string">"./img/ad001.png 480w, ./img/ad001-m.png 800w, ./img/ad001-l.png 1600w"</span></span></span><br><span class="line"><span class="tag">/&gt;</span></span><br></pre></td></tr></table></figure>

<p>当屏幕分辨率小于等于 480px 时，使用 <code>ad001.png</code>，当大于 480px 小于等于 800px 时使用 <code>ad001-m.png</code>;<br>当分辨率被调整到大一级时再缩小回来，也会使用加载后最大的图片来显示，并不会再替换到对应小分辨率设置的图片。因为当加载过大的图片后，就被认为缓存了，再次加载不会造成影响。</p>
<blockquote>
<p>注意：<code>img</code> 需要设置成块级元素，不然不管用。</p>
</blockquote>
<p>这样有个问题，比如 img 图片是放在一个容器中，img 只是容器的 50%宽，这时图片的加载判断依据还是屏幕的大小，这其实不是很合适，当屏幕是 700px 时，按上面的条件，这时加载的是 800px 的图片，但是图片实际显示大小确实 350px，小于 480px，所以应该加载 480px 的图片。那么该如何设置图片判断的实际尺寸呢？这就需要用到另一个属性<code>sizes</code></p>
<h3 id="使用新标记-srcset-配合-sizes"><a href="#使用新标记-srcset-配合-sizes" class="headerlink" title="使用新标记 srcset 配合 sizes"></a>使用新标记 srcset 配合 sizes</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span></span></span><br><span class="line"><span class="tag">  <span class="attr">alt</span>=<span class="string">"测试不同分辨率显示图片"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">src</span>=<span class="string">"/img/ad001.png"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">srcset</span>=<span class="string">"./img/ad001.png 480w, ./img/ad001-m.png 800w, ./img/ad001-l.png 1600w"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">sizes</span>=<span class="string">"50vw"</span></span></span><br><span class="line"><span class="tag">/&gt;</span></span><br></pre></td></tr></table></figure>

<p>上面 sizes 设置成<code>50vw</code>，就是说图片按照视频宽度的 50%显示。这样上面的情况图片大小改变就符合实际了。</p>
<p><code>sizes</code>的值是媒体查询和宽度组成，媒体查询可省略，默认就是所有的分辨率都适应，可以针对不同的分辨率设置不同的值。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span></span></span><br><span class="line"><span class="tag">  <span class="attr">alt</span>=<span class="string">"测试不同分辨率显示图片"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">src</span>=<span class="string">"/img/ad001.png"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">srcset</span>=<span class="string">"./img/ad001.png 480w, ./img/ad001-m.png 800w, ./img/ad001-l.png 1600w"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">sizes</span>=<span class="string">"(min-width:800px) 800px, 100vw"</span></span></span><br><span class="line"><span class="tag">/&gt;</span></span><br></pre></td></tr></table></figure>

<p>上面的配置就是当屏幕分辨率大于等于 800px 时，图片都是 800px，否则 100%视图宽度显示。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sizes&#x3D;&quot;(min-width:800px) calc(100vw - 30em), 100vw&quot;</span><br></pre></td></tr></table></figure>

<p>计算大小，注意：减号两边带上空格</p>
<h3 id="使用新标记-picture"><a href="#使用新标记-picture" class="headerlink" title="使用新标记 picture"></a>使用新标记 picture</h3><p>HTML <code>picture</code> 元素通过包含零或多个 <code>source</code> 元素和一个 <code>img</code> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <code>source</code> 元素，如果没有匹配的，就选择 <code>img</code> 元素的 <code>src</code> 属性中的 <code>URL</code> 。然后，所选图像呈现在<code>img</code>元素占据的空间中。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">section</span> <span class="attr">class</span>=<span class="string">"content"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">picture</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">source</span> <span class="attr">media</span>=<span class="string">"(max-width:30em)"</span> <span class="attr">srcset</span>=<span class="string">"./img/ad002.png 480w"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">source</span> <span class="attr">media</span>=<span class="string">"(max-width:50em)"</span> <span class="attr">srcset</span>=<span class="string">"./img/ad002-m.png 800w"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">source</span> <span class="attr">media</span>=<span class="string">"(max-width:87em)"</span> <span class="attr">srcset</span>=<span class="string">"./img/ad002-l.png 1600w"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">source</span> <span class="attr">media</span>=<span class="string">"(orientation:landscape)"</span> <span class="attr">srcset</span>=<span class="string">"./img/ad002-m.png 800w"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">source</span> <span class="attr">type</span>=<span class="string">"image/svg+xml"</span> <span class="attr">srcset</span>=<span class="string">"logo.svg"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">source</span> <span class="attr">type</span>=<span class="string">"image/webp"</span> <span class="attr">srcset</span>=<span class="string">"logo.webp 400w, logo-m.webp 800w"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"./img/ad002.png"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">picture</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>根据不同的媒体条件加载不同的图片。<br>上面第四个是横屏的设置。<br>注意几点：</p>
<ol>
<li>media 的值必须被小括号括起来，不然不起作用、</li>
<li>必须有 img 标签</li>
</ol>
<p><code>picture</code> 比 <code>img</code> 使用 <code>srcset</code> 要智能，即使放到最大再缩小回来，还是会加载对应条件的图片。</p>
<p>使用 svg 的图片</p>
<h3 id="使用-svg-格式的图片"><a href="#使用-svg-格式的图片" class="headerlink" title="使用 svg 格式的图片"></a>使用 svg 格式的图片</h3><p>矢量图，它是根据一定的规则来绘制图片，而不是像素。在不同的分辨率下不会失真，且图片尺寸小。</p>
<p>在线绘制网站</p>
<p><a href="https://editor.method.ac/" target="_blank" rel="noopener">第一个</a><br><a href="https://icomoon.io/" target="_blank" rel="noopener">第二个</a></p>
<h3 id="兼容性对比"><a href="#兼容性对比" class="headerlink" title="兼容性对比"></a>兼容性对比</h3><p>IE 浏览器完全不支持 srcset 和 picture，安卓浏览器支持也不好，而 svg 是支持比较好的。但是有些图片色彩比较丰富，必须使用位图，使用位图，我们就是用 pictrue 或者 srcset 来做，然后通过 polyfill 来解决兼容性的问题。图片的 polyfill 我们使用 <a href="https://github.com/scottjehl/picturefill" target="_blank" rel="noopener">Pictruefill</a>的工具库来解决，下载并引用这个 js 库即可。=</p>
<blockquote>
<p>polyfill 就是泥瓦匠的那个腻子，往墙上抹水泥的那个。</p>
</blockquote>
<h3 id="压缩图片网站"><a href="#压缩图片网站" class="headerlink" title="压缩图片网站"></a>压缩图片网站</h3><p><a href="https://iconizr.com/" target="_blank" rel="noopener">压缩 svg 网站</a></p>
<p><a href="https://tinypng.com/" target="_blank" rel="noopener">压缩 png 网站</a></p>
<h2 id="什么是-DPR"><a href="#什么是-DPR" class="headerlink" title="什么是 DPR"></a>什么是 DPR</h2><p>dpr 是设备像素比，就是物理像素和显示像素的比。</p>
<h2 id="搭建服务"><a href="#搭建服务" class="headerlink" title="搭建服务"></a>搭建服务</h2><p>使用 http-server，也可以 serve 这些线程的 node.js 服务包</p>
<h2 id="云测试网站"><a href="#云测试网站" class="headerlink" title="云测试网站"></a>云测试网站</h2><p><a href="https://testin.cn/" target="_blank" rel="noopener">https://testin.cn/</a></p>
<p><a href="http://genymotion.net/" target="_blank" rel="noopener">移动端虚拟机</a></p>
<h2 id="使用-hacks-来解决兼容性"><a href="#使用-hacks-来解决兼容性" class="headerlink" title="使用 hacks 来解决兼容性"></a>使用 hacks 来解决兼容性</h2><p><a href="http://browserhacks.com/" target="_blank" rel="noopener">查看各浏览器或设备的 hacks 信息</a></p>
<p>使用 pollyfill 或 shiv 来解决兼容性</p>
<ul>
<li><a href="https://github.com/aFarkas/html5shiv" target="_blank" rel="noopener">html5shiv</a></li>
<li><a href="https://github.com/scottjehl/Respond" target="_blank" rel="noopener">一个有名的 pollyfile-Respond</a></li>
</ul>
<p>手动来检测是否支持一些特性<br><a href="https://modernizr.com/" target="_blank" rel="noopener">https://modernizr.com/</a></p>
<p><a href="http://browsersync.cn/" target="_blank" rel="noopener">省时的浏览器同步测试工具</a><br>就是启动一个会自动刷新的服务，但是多个设备上的网页操作是同步的，比如开了三个浏览器，滚动一个，其他两个也会滚动。包括更改内容，等等都是同步的。</p>
<h2 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h2><h3 id="代码压缩"><a href="#代码压缩" class="headerlink" title="代码压缩"></a>代码压缩</h3><p><a href="https://javascript-minifier.com/" target="_blank" rel="noopener">代码压缩网站</a></p>
<p>使用一些第三方构建工具</p>
<ul>
<li>[gulp]</li>
<li>[webpack]</li>
</ul>
<h2 id="响应式框架"><a href="#响应式框架" class="headerlink" title="响应式框架"></a>响应式框架</h2><ul>
<li><a href="https://www.bootcss.com/" target="_blank" rel="noopener">Bootstrap</a></li>
<li><a href="">Foundation</a></li>
<li><a href="https://semantic-ui.com/" target="_blank" rel="noopener">Semantic UI</a></li>
<li><a href="http://www.purecss.cn/" target="_blank" rel="noopener">PureCSS</a></li>
</ul>
<h2 id="原型设计的工具"><a href="#原型设计的工具" class="headerlink" title="原型设计的工具"></a>原型设计的工具</h2><ul>
<li>Balsamlq Mockups 3</li>
<li>axure</li>
<li>sketch (mac)</li>
</ul>
<h2 id="交互工具"><a href="#交互工具" class="headerlink" title="交互工具"></a>交互工具</h2><ul>
<li><a href="http://www.flinto.com.cn/" target="_blank" rel="noopener">flinto</a></li>
<li><a href="https://principleformac.com/" target="_blank" rel="noopener">principleformac</a></li>
</ul>
<p>让图片动起来，用 UI 的设计图把交互工程连起来，还能导出 gif 动画。</p>
</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">wenmu</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://blog.wangpengpeng.site/2020/02/25/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%BC%80%E5%8F%91/">http://blog.wangpengpeng.site/2020/02/25/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%BC%80%E5%8F%91/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://blog.wangpengpeng.site">温木的博客</a>！</span></div></div><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/css/">css</a><a class="post-meta__tags" href="/tags/%E5%93%8D%E5%BA%94%E5%BC%8F/">响应式</a></div><div class="post-qr-code"><div class="post-qr-code-item"><img class="post-qr-code__img" src="https://i.loli.net/2020/02/27/hOBzIxFDJMCrmtN.jpg"><div class="post-qr-code__desc">微信打赏</div></div></div><nav id="pagination"><div class="prev-post pull-left"><a href="/2020/02/25/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%BC%80%E5%8F%91-1/"><i class="fa fa-chevron-left">  </i><span>响应式开发-1</span></a></div><div class="next-post pull-right"><a href="/2020/02/21/rem%E5%92%8Cem%E7%9A%84%E5%8C%BA%E5%88%AB/"><span>rem和em的区别</span><i class="fa fa-chevron-right"></i></a></div></nav><div id="vcomment"></div><script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script><script>var notify = 'false' == true ? true : false;
var verify = 'false' == true ? true : false;
var GUEST_INFO = ['nick','mail','link'];
var guest_info = 'nick,mail,link'.split(',').filter(function(item){
  return GUEST_INFO.indexOf(item) > -1
});
guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
window.valine = new Valine({
  el:'#vcomment',
  notify:notify,
  verify:verify,
  appId:'U1QqpeQNuBnRsfygHk1GQ30q-gzGzoHsz',
  appKey:'dunDQzEseDzgsKgw4qLQcog1',
  placeholder:'支持markdown！',
  avatar:'wavatar',
  guest_info:guest_info,
  pageSize:'20',
  lang: 'zh-cn'
})</script></div></div><footer><div class="layout" id="footer"><div class="copyright">&copy;2019 - 2020 By wenmu</div><div class="framework-info"><span>驱动 - </span><a href="http://hexo.io" target="_blank" rel="noopener"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 - </span><a href="https://github.com/Molunerfinn/hexo-theme-melody" target="_blank" rel="noopener"><span>Melody</span></a></div><div class="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_page_pv">该文访问量<span id="busuanzi_value_page_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.6.1"></script><script src="/js/fancybox.js?version=1.6.1"></script><script src="/js/sidebar.js?version=1.6.1"></script><script src="/js/copy.js?version=1.6.1"></script><script src="/js/fireworks.js?version=1.6.1"></script><script src="/js/transition.js?version=1.6.1"></script><script src="/js/scroll.js?version=1.6.1"></script><script src="/js/head.js?version=1.6.1"></script><script>if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  $('#nav').addClass('is-mobile')
  $('footer').addClass('is-mobile')
}</script></body></html>